<template>
  <div class="body">
    <header class="header">
      <div class="title">
        <img src="../../assets/images/01_11.png" alt class="img_zuo" @click="back" />
        <div>巡查排查</div>
      </div>
    </header>
    <div class="contant" v-if="data != null">
      <div class="bg-clr">
        <div class="list-box">
          <span class="dian">{{data.broadHeadingName}}一</span>
          <span class="yhd">{{ data.unitsName ? data.unitsName : '无对象' }}</span>
        </div>
        <div class="list-box" v-if="data.isRectifica !== -1">
          <div v-if="dataList.yhlb === 102 || dataList.yhlb === 100">
            <img
              :src="data.isRectifica === 1 || data.isRectifica === 3 ? isRectificas : isRectifica"
              style="width: 20px">
          </div>
          <div v-else>
            <img v-if="data.isRectifica !== -1" style="width: 13px" src="../../assets/images/lg.png">
          </div>
          <div>隐患</div>
        </div>
        <div v-for="(item, index) in data.taskName" :key="index+'a'">
          <div class="list-box">
            <span class="dian">专项任务一</span>
            <span class="yhd">{{item.taskName}}</span>
          </div>
          <div
            class="list-box"
            v-for="(item1, index1) in item.child"
            :key="index1+'b'">
            <span class="dian">具体任务{{index + 1}}一</span>
            <span class="yhd">{{ item1.concretenessName }}</span>
          </div>
        </div>
        <div class="list-box" v-if="qi_name !== ''">
          <span class="dian">参加领导一</span>
          <span class="yhd">{{ qi_name }}</span>
        </div>
        <div class="list-box" v-if="jie_name !== ''">
          <span class="dian">街道部门一</span>
          <span class="yhd">{{ jie_name }}</span>
        </div>
        <div class="list-box" v-if="she_name !== ''">
          <span class="dian">社区一</span>
          <span class="yhd">{{ she_name }}</span>
        </div>
      </div>
      <div class="yh-box" v-if="dataYh.length >= 1">
        <div class="bg-clr" v-for="(item, index) in dataYh" :key="index">
          <div class="list-box" v-if="item.name!='' && item.name!='undefined'">
            <span class="dian">隐患类别一</span>
            <span class="yhd">{{ item.name }}</span>
          </div>
          <div class="list-box">
            <span class="dian">隐患点一</span>
            <span class="yhd">{{item.ptiName}}</span>
          </div>
          <div class="list1 list1-sapn" v-if="item.title!='' && item.title!='undefined'">
            {{item.title}}
          </div>
          <div class="list" v-if="item.contract !='' ">
            <div class="yy" @click="y_play(item.contract,$event)">
              <img src="../../assets/images/play.png" class="img_yuyin"/>
              <span class="ly_s">{{item.contractime}}</span>
            </div>
          </div>
          <div class="lists lists1">
            <ul class="lists imgs_ul" v-if="item.imgurl !== ''">
              <li class="img-box" v-for="(items, indexs) in item.imgurl.split(',')" :key="indexs">
                <div class="img-box-item">
                  <img :src="name + items" alt="" class="imgs">
                </div>
                <div class="imgtext">{{item.imgText.split(',')[indexs]}}</div>
              </li>
            </ul>
            <ul class="video-box" v-if="item.videourl !== ''">
              <li class="video-list" v-for="(obj,i) of item.videourl.split(',')" :key="i">
                <video controls>
                  <source :src="name + obj" type="video/mp4">
                  <source :src="name + obj" type="video/ogg">
                  您的浏览器不支持Video标签。
                </video>
              </li>
            </ul>
          </div>
          <div class="list" v-if="item.yhlb === 100 ">
            <div class="men-box">
              <div class="list-boxs">
                <div class="dian">截止日期一</div>
                <div class="yhd">
                  {{ `${new Date(item.rectificationTime).getFullYear()}-${(new Date(item.rectificationTime).
                  getMonth() + 1) < 10 ? `0${new Date(item.rectificationTime).getMonth() + 1}` : new Date(item.rectificationTime).
                  getMonth() + 1}-${new Date(item.rectificationTime).getDate() < 10 ? `0${new Date(item.rectificationTime).
                  getDate()}` : new Date(item.rectificationTime).getDate()}` }}
                </div>
              </div>
            </div>
<!--            <div class="dian">截止日期</div>-->
<!--            <div class="list_two">-->
<!--              {{ `${new Date(item.rectificationTime).getFullYear()}-${(new Date(item.rectificationTime).-->
<!--              getMonth() + 1) < 10 ? `0${new Date(item.rectificationTime).getMonth() + 1}` : new Date(item.rectificationTime).-->
<!--              getMonth() + 1}-${new Date(item.rectificationTime).getDate() < 10 ? `0${new Date(item.rectificationTime).-->
<!--              getDate()}` : new Date(item.rectificationTime).getDate()}` }}-->
<!--            </div>-->
          </div>
          <div v-if="item.child != undefined">
            <div class="list1 list1-sapn" v-if="item.child.title!='' && item.child.title!='undefined'">
              {{item.child.title}}
            </div>
            <div class="list" v-if="item.child.contract !== '' ">
              <div class="yy" @click="y_play(item.child.contract,$event)">
                <img src="../../assets/images/play.png" class="img_yuyin"/>
                <span class="ly_s">{{item.child.contractime}}</span>
              </div>
            </div>
            <div class="lists lists1" v-if="item.child">
              <ul class="lists imgs_ul"  >
                <li class="img-box" v-for="(items, indexs) in item.child.imgUrl.split(',')" :key="indexs+'aa'">
                  <div class="img-box-item">
                    <img :src="name + items" alt="" class="imgs">
                  </div>
                  <div class="imgtext">{{item.child.imgText.split(',')[indexs]}}</div>
                </li>
              </ul>
              <ul class="video-box" v-if="item.child.videoUrl !== ''">
                <li class="video-list" v-for="(obj,i) of item.child.videoUrl.split(',')" :key="i">
                  <video controls>
                    <source :src="name + obj" type="video/mp4">
                    <source :src="name + obj" type="video/ogg">
                    您的浏览器不支持Video标签。
                  </video>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div v-if="data.ConstructInfo">
        <div class="yh-box" v-if="data.ConstructInfo.length >= 1">
          <div class="bg-clr" v-for="(item, index) in data.ConstructInfo" :key="index">
            <div class="list-box" v-if="item.name!='' && item.name!='undefined'">
              隐患类别一{{item.name}}
            </div>
            <div class="list-box">
              隐患点一
              <span>
                {{item.ptiName}}
              </span>
            </div>
            <div class="list1 list1-sapn" v-if="item.title!='' && item.title!='undefined'">
              {{item.title}}
            </div>
            <div class="list" v-if="item.contract !='' ">
              <div class="yy" @click="y_play(item.contract,$event)">
                <img src="../../assets/images/play.png" class="img_yuyin"/>
                <span class="ly_s">{{item.contractime}}</span>
              </div>
            </div>
            <div class="lists lists1">
              <ul class="lists imgs_ul" v-if="item.imgurl !== ''">
                <li class="img-box" v-for="(items, indexs) in item.imgurl.split(',')" :key="indexs">
                  <div class="img-box-item">
                    <img :src="name + items" alt="" class="imgs">
                  </div>
                  <div class="imgtext">{{item.imgText.split(',')[indexs]}}</div>
                </li>
              </ul>
              <ul class="video-box" v-if="item.videourl !== ''">
                <li class="video-list" v-for="(obj,i) of item.videourl.split(',')" :key="i">
                  <video controls>
                    <source :src="name + obj" type="video/mp4">
                    <source :src="name + obj" type="video/ogg">
                    您的浏览器不支持Video标签。
                  </video>
                </li>
              </ul>
            </div>
            <div class="list" v-if="item.yhlb === 100 ">
              <div class="men-box">
                <div class="list-boxs">
                  <div class="dian">截止日期一</div>
                  <div class="yhd">
                    {{ new Date(item.rectificationTime).getFullYear() + '-'
                    + (new Date(item.rectificationTime).getMonth() + 1)
                    + '-' + new Date(item.rectificationTime).getDate() }}</div>
                </div>
              </div>
<!--              <div class="dian">截止日期</div>-->
<!--              <div class="list_two">-->
<!--                {{ new Date(item.rectificationTime).getFullYear() + '-'-->
<!--                + (new Date(item.rectificationTime).getMonth() + 1)-->
<!--                + '-' + new Date(item.rectificationTime).getDate() }}-->
<!--              </div>-->
            </div>
            <div v-if="item.child != undefined">
              <div class="list1" v-if="item.child.title!='' && item.child.title!='undefined'">
                {{item.child.title}}
              </div>
              <div class="list" v-if="item.child.contract !== '' ">
                <div class="yy" @click="y_play(item.child.contract,$event)">
                  <img src="../../assets/images/play.png" class="img_yuyin"/>
                  <span class="ly_s">{{item.child.contractime}}</span>
                </div>
              </div>
              <div class="lists lists1" v-if="item.child">
                <ul class="lists imgs_ul"  >
                  <li class="img-box" v-for="(items, indexs) in item.child.imgUrl.split(',')" :key="indexs+'aa'">
                    <div class="img-box-item">
                      <img :src="name + items" alt="" class="imgs">
                    </div>
                    <div class="imgtext">{{item.child.imgText.split(',')[indexs]}}</div>
                  </li>
                </ul>
                <ul class="video-box" v-if="item.child.videoUrl !== ''">
                  <li class="video-list" v-for="(obj,i) of item.child.videoUrl.split(',')" :key="i">
                    <video controls>
                      <source :src="name + obj" type="video/mp4">
                      <source :src="name + obj" type="video/ogg">
                      您的浏览器不支持Video标签。
                    </video>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="yh-box" v-if="judgmentShow === true">
        <div class="bg-clr">
          <div class="list1" v-if="datas.title!='' && datas.title != 'undefined'">
            <span class="list1-sapn">{{ datas.title }}</span>
          </div>
          <div class="list" v-if="datas.contract !== ''">
            <div class="yy" @click="y_play(datas.contract,$event)">
              <img src="../../assets/images/play.png" class="img_yuyin"/>
              <span class="ly_s">{{ datas.contractime }}</span>
            </div>
          </div>
          <div class="lists lists1">
            <ul class="lists imgs_ul" v-if="datas.imgurl !== ''">
              <li class="img-box" v-for="(items, indexs) in datas.imgurl.split(',')" :key="indexs">
                <div class="img-box-item">
                  <img :src="name + items" alt="" class="imgs">
                </div>
                <div class="imgtext" v-if="datas.imgText !== ''">{{ datas.imgText.split(',')[indexs]}}</div>
              </li>
            </ul>
            <ul class="video-box" v-if="datas.videourl !== ''">
              <li class="video-list" v-for="(obj,i) of datas.videourl.split(',')" :key="i">
                <video controls>
                  <source :src="name + obj" type="video/mp4">
                  <source :src="name + obj" type="video/ogg">
                  您的浏览器不支持Video标签。
                </video>
              </li>
            </ul>
          </div>
          <div class="list" v-if="datas.yhlb === 100">
            <div class="men-box">
              <div class="list-boxs">
                <div class="dian">截止日期一</div>
                <div class="yhd">
                  {{ new Date(datas.rectificationTime).getFullYear() + '-'
                  + (new Date(datas.rectificationTime).getMonth() + 1)
                  + '-' + new Date(datas.rectificationTime).getDate() }}</div>
              </div>
            </div>
<!--            <div class="dian">截止日期</div>-->
<!--            <div class="list_two">-->
<!--              {{ new Date(datas.rectificationTime).getFullYear() + '-'-->
<!--              + (new Date(datas.rectificationTime).getMonth() + 1)-->
<!--              + '-' + new Date(datas.rectificationTime).getDate() }}-->
<!--            </div>-->
          </div>
          <div v-if="datas.child != undefined">
            <div class="list1" v-if="datas.child.title != '' && datas.child.title !='undefined'">
              {{ datas.child.title }}
            </div>
            <div class="list" v-if="datas.child.contract !='' ">
              <div class="yy" @click="y_play(datas.child.contract,$event)">
                <img src="../../assets/images/play.png" class="img_yuyin"/>
                <span class="ly_s">{{ datas.child.contractime }}</span>
              </div>
            </div>
            <div class="lists lists1" v-if="datas.child">
              <ul class="lists imgs_ul"  >
                <li class="img-box" v-for="(items, indexs) in datas.child.imgUrl.split(',')" :key="indexs+'aa'">
                  <div class="img-box-item">
                    <img :src="name + items" alt="" class="imgs">
                  </div>
                  <div class="imgtext">{{datas.child.imgText.split(',')[indexs]}}</div>
                </li>
              </ul>
              <ul class="video-box" v-if="datas.child.videoUrl !== ''">
                <li class="video-list" v-for="(obj,i) of datas.child.videoUrl.split(',')" :key="i">
                  <video controls>
                    <source :src="name + obj" type="video/mp4">
                    <source :src="name + obj" type="video/ogg">
                    您的浏览器不支持Video标签。
                  </video>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="list bg-clr">
        <div class="dians" style="width: auto;">{{ data.communityName }}
          <div class="dians-sq">{{ data.userName }}</div>
          <div class="dians-box">
            <img src="../../assets/images/tabbar_user.png" alt="" class="dian-imgs">
            <span>{{ data.participantNumber }}</span>
          </div>
        </div>
        <div class="list_two">{{ data.addtime }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import "../../assets/js/zoom";
  export default {
    name: "hard_detail",
    data() {
      return {
        isRectifica: require('../../assets/images/jsd.gif'),
        isRectificas: require('../../assets/images/lg.png'),
        patrolTroubleshootId: 0,
        infoId: 0,
        userId: null,
        data: {},
        datas: {
          imgurl: '',
          videourl: ''
        },
        dataYh: [],
        qi_name: "",//区人名
        jie_name: "",//街道人名
        she_name: "",//社区人名
        name: '',
        judgmentShow: true,
        leadership: '',
        leaderships: '',
		jdjc_detail_params:{},
        p:null,
        dataList: {}
      };
    },
    destroyed() {
      setTimeout( () => {
        this.$zoom.showImagesFn.hideContainer();
      })
    },
    methods: {
      stopPlay(){
        if(this.p){
          this.p.stop();
        }
        this.play_code = 1;
        $('.img_yuyin').attr("src", require('../../assets/images/play.png'));
        this.$forceUpdate();
      },
      back(){
        this.stopPlay();
        // if(this.checkNull(this.jdjc_detail_params.from)){
        //   this.$router.push("/index");
        // }else{
        //   this.$router.push(this.jdjc_detail_params.from);
        // }
        this.$router.back()
      },
      checkNull(value){//检测是否为空
        if(value||value===0||value==='0'){
          return false;
        }else{
          return true;
        }
      },
      y_play(yy_path, e) {
        var dom = $(e.currentTarget).find(".img_yuyin")
        console.log(dom)
        // $(dom).attr("src", require('../../assets/images/play_dt.gif'))
        console.log(yy_path);
        var _this = this;
        _this.p = null;
        console.log(_this.$global_msg.Url.host + yy_path);
        _this.p = plus.audio.createPlayer(_this.$global_msg.Url.host+"" + yy_path);
        if (_this.play_code == 1) {
          $(dom).attr("src", require('../../assets/images/play_dt.gif'))

          console.log("进入播放");
          _this.play_code = 2;
          _this.p.play(() => {
              //播放完毕
              _this.play_code = 1;
              $(dom).attr("src", require('../../assets/images/play.png'));
              _this.p.close();
            },
            function (e) {
              _this.play_code = 1;
              $(dom).attr("src", require('../../assets/images/play.png'));
              _this.p.close();
              alert("Audio play error: " + e.message);
            });
        } else {
          _this.play_code = 1;
          $(dom).attr("src", require('../../assets/images/play.png'));
          _this.p.close();
        }
      },
      querys (data) {
        let a = [];
        let b = [];
        if (data.NoweInfo.length >= 1) {
          data.NoweInfo.map(res => {
            if (res.yhlb === 0) {
              this.datas = res
              if (res.contract === '' && res.contractime === ''
                && res.imgText === '' && res.imgurl === ''
                && res.name === '' && res.ptiName === ''
                && res.title === '' && res.videourl === '') {
                this.judgmentShow = false;
              }
            } else {
              b.push(res);
              this.dataYh = b;
              this.judgmentShow = false;
            }
          })
        } else {
          this.judgmentShow = false;
        }
        console.log(this.datas)
        data.person.map(res => {
          if (res.lev === 1) {
            a.push(res.name)
            this.leadership = a.toString()
          }
          if (res.lev === 2) {
            a.push(res.name)
            this.leaderships = a.toString()
          }
        })
      },
      query () {
        try {
          plus.nativeUI.showWaiting("正在加载...");
        } catch (e) {
          console.log('plus问题');
        }
        let params = {
          ptId: this.jdjc_detail_params.patrolTroubleshootId,
          ptInfoId: this.jdjc_detail_params.patrolTroubleshootInfoId,
          userId: this.userId
        }
        this.axios.get(`${this.$global_msg.Url.host}/SearchScreen/selectTroubleShootById`,
          { params }).then(res => {
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log('plus问题');
            }
            console.log(res);
            if (res.data.code == 200) {
              this.data = res.data.rows;
              if (res.data.rows.NoweInfo.length >= 1) {
                this.dataList = res.data.rows.NoweInfo[0];
              } else {
                this.dataList = res.data.rows.ConstructInfo[0];
              }
              this.querys(res.data.rows);
              // console.log(res.data.rows.NoweInfo[0].contracTime)
              res.data.rows.person.forEach(item => {
                if (item.level === 0) {
                  if (item.lev === 1 || item.lev === 2) {
                    this.qi_name += "、" + item.name
                  }
                } else if (item.level === 1) {
                  if (item.lev === 1 || item.lev === 2) {
                    this.jie_name += "、" + item.name
                  }
                } else if (item.level === 2) {
                  this.she_name += "、" + item.name
                }
              });
              this.qi_name = this.qi_name.substring(1)
              this.jie_name = this.jie_name.substring(1)
              this.she_name = this.she_name.substring(1)
              // this.imgList = this.
            } else {
              this.$toast(res.data.msg);
            }
          }).catch(err=>{
             this.$terminal._error(err)
          })
      }
    },
    mounted() {
      var _this = this;
      // document.body.style.backgroundColor="#F7F7F9";
      this.name = this.$global_msg.Url.hosts + ''
      //切换后台
      document.addEventListener("pause", function(){
        _this.stopPlay();
      }, false);
      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.back();
      // }, false);
	},
    created() {
      this.userId = localStorage.getItem("userId")//获取访问id
      this.jdjc_detail_params = localStorage.getItem('jdjc_detail_params')?JSON.parse(localStorage.getItem('jdjc_detail_params')):{};
      this.query();
    }
  };
</script>
<style scoped>
  .dian {
    word-break: keep-all;
  }
  .list-boxs {
    display: flex;
    align-items: center;
    white-space: normal;
  }
  .men-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 40px;
    border-bottom: 1Px solid #ddd;
  }
  .list-box {
    display: flex;
    align-items: center;
    border-bottom: 1Px solid #ddd;
    padding: 0.4352rem 0.4rem;
    white-space: normal;
  }
  .list1-sapn {
    text-indent:2em
  }
  .yh-box {
    padding-top: 10px;
    background-color: #f2f2f2
  }
  .bg-clr {
    background-color: #ffffff
  }
  .dian-imgs {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  .imgtext{
    word-break: break-word;
  }
  .img-box-item{
    width: 4.381481rem;
    height: 2.814814rem;
    border: 1px #ddd solid;
    border-radius: 0.277778rem;
  }
  .video-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%
  }
  /* 视频列表 */
  .video-list{
    padding-top: 0.259259rem;
    margin-bottom:0.37037rem;
    width: 100%;
    height: auto;
    display: flex;
    position: relative;
    flex-direction: column;
    border-top: 1px #DDDDDD solid;
  }
  .video-list video{
    margin-left: 0.37037rem;
    margin-right: 0.37037rem;
    width: auto;
    height: 4.87037rem !important;
    margin-top: 0.259259rem;
  }
  .video-list video:first-child{
    margin-top: 0;
  }
  .video-list .del{
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0.925925rem;
    overflow: hidden;
  }
.list1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1Px solid #ddd;

    padding: 0.3704rem 0.4rem;
  }
  .dian{
    word-break: keep-all;
  }
  .dians{
    display: flex;
    justify-content: center;
  }
  .dians-sq {
    margin-left: 40px;
    margin-right: 10px;
  }
  .dians-box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #909090;
  }
  .imgs_ul {
    padding: 0 0.4rem;
    width: 100%;
    padding-bottom: 0.2rem;
  }
  .lists {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .lists1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1Px solid #ddd;
  }
  .lists1:first-child {
    border-bottom: none;
  }
  .img-box {
    width: 4.381481rem;
    /* height: 2.814814rem; */
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
    display: flex;

    border-radius: 30px;
    margin-top: 0.2rem;
    flex-wrap: wrap;
  }
  .imgs {
    width: 100%;
    height: 100%;
    z-index: 11;
  }
  .yy img {
    margin: 0 0.2rem;
    width: 0.4rem;
  }

  .yy {
    width: 2.3rem;
    height: 0.8rem;
    border: 1Px solid #ddd;
    display: flex;
    border-radius: 0.2rem;
    align-items: center;
  }

  .list_two {
    color: #909090;

  }

  .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1Px solid #ddd;
    /* height: 1.3rem; */
    padding: 0.4352rem 0.4rem;
  }
  .contant {
    margin-top: 1.8519rem;
    /* border: 1px solid white; */
  }

  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
</style>
